<template>
    <view class="container">
        <!-- 订单状态 -->
        <!-- <view class="status-bar">
            <view class="status-icon">
                <uni-icons type="checkbox-filled" size="40" color="#1890ff"></uni-icons>
            </view>
            <view class="status-info">
                <view class="status-text">待支付</view>
                <view class="status-desc">请在23小时59分内完成支付</view>
            </view>
        </view> -->

        <!-- 收货地址 -->
        <!-- <view class="address-card">
            <view class="address-info">
                <view class="contact">
                    <text class="name">张三</text>
                    <text class="phone">138****8888</text>
                </view>
                <view class="address">福建省厦门市思明区湖滨南路809号2206室</view>
            </view>
            <uni-icons type="location" size="24" color="#666"></uni-icons>
        </view> -->

        <!-- 商品信息 -->
        <view class="order-card">
            <!-- <view class="store-info">
                <uni-icons type="shop" size="18"></uni-icons>
                <text class="store-name">厦门晟聚新健康管理有限公司</text>
            </view> -->
            <view class="product-info" v-for="item in proList">
                <image class="product-img" :src="item.proImg" mode="aspectFill"></image>
                <view class="product-detail" >
                    <view class="product-name">{{item.proName}}</view>
                    <view class="product-specs">{{item.propertyName}}</view>
                    <view class="product-specs">{{item.presPerNum}}期，每期{{item.presPer}}天</view>
                    <view class="price-info">
                        <text class="price">￥{{item.sellPrice}}</text>
                        <!-- <text class="count">x1</text> -->
                    </view>
                </view>
            </view>
        </view>

        <!-- 订单信息 -->
        <view class="info-card">
            <view class="info-title">订单信息</view>
            <view class="info-item" v-if="subOrderInfo.contractStatus == '01'">
                <text class="label">协议</text>
                <text class="value link" @click="toContract">查看协议</text>
            </view>
            <view class="info-item" v-if="showFangYuan">
                <text class="label">房源信息</text>
                <text class="value link" @click="toFangyuan">查看房源地址</text>
            </view>
            <view class="info-item" v-if="orderDetail.rentDebitStatus == '01'">
                <text class="label">扣费详情</text>
                <text class="value link" @click="showDaiKouList">查看</text>
            </view>
            <view class="info-item">
                <text class="label">订单编号</text>
                <text class="value">{{orderDetail.orderNo}}</text>
            </view>
            <view class="info-item">
                <text class="label">下单时间</text>
                <text class="value">{{orderDetail.createTime}}</text>
            </view>
            <view class="info-item">
                <text class="label">截止时间</text>
                <text class="value">{{orderDetail.rentEndDate}}</text>
            </view>
        </view>

        <!-- 金额明细 -->
        <view class="price-card">
            <view class="info-title">金额明细</view>
            <view class="price-item">
                <text class="label">已付金额</text>
                <text class="value">￥{{orderDetail.payedAmount}}</text>
            </view>
            <view class="price-item">
                <text class="label">押金</text>
                <template v-if="orderDetail.depostiStatus == '01'">
                    <text class="value" v-if="orderDetail.depositSource == 'ali'">￥{{orderDetail.depositAmount}}</text>
                    <text class="value" v-if="orderDetail.depositSource == 'ali-zmmy'">芝麻免押</text>
                </template>
                <text class="value" v-else>-</text>
            </view>
            <!-- <view class="price-item total">
                <text class="label">租金</text>
                <text class="value">￥450.00</text>
            </view> -->
        </view>

        <!-- 底部操作栏 -->
        <view class="bottom-bar">
            <!-- <button class="btn btn-default" @tap="cancelOrder">取消订单</button> -->
            <button v-if="orderDetail.rentDebitStatus == '00' && orderDetail.orderStatus == '00'" class="btn btn-primary" @tap="payOrder">继续签约</button>
            <view class="safe_bar"></view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import interact from '@/utils/interact'
import { orderInfo, getRentOrderInfo, getContractDownUrl  } from '@/api/order'

let orderNo = ''
onLoad((options: any) => {
    orderNo = options.orderNo
    getOrderDetail()
    getOrderSubInfo()
})

const orderDetail = ref<any>({ })
const proList = ref<any[]>([])
const renzhengMoneyInfo = ref<any>({})
const showFangYuan = computed(() => {
    const LIMIT_DAY = 7
    const inLimitDay = (createTime: string) => {
        let today = new Date()
        let passLimit = today.getTime() - LIMIT_DAY*24*60*60*1000
        let orderTime = new Date(createTime.replace(/-/ig, '/')).getTime()
        // console.log(new Date(passLimit).format('yyyy-MM-dd hh:mm:ss'));
        // console.log(new Date(orderTime).format('yyyy-MM-dd hh:mm:ss'));
        return passLimit <= orderTime
    }
    if(
        orderDetail.value.createTime &&
        inLimitDay(orderDetail.value.createTime) &&
        orderDetail.value.rentDebitStatus == '01'
    ) {
        return true
    } else {
        return false
    }
})

// 获取订单详情
const getOrderDetail = () => {
    // TODO: 调用获取订单详情接口
    orderInfo({
        orderNo: orderNo,
    }).then(res => {
        let detail = res.data
        orderDetail.value = detail
        proList.value = res.data.items.filter((item: any) => item.itemType == 'B')
        renzhengMoneyInfo.value = res.data.items.find((item: any) => item.itemType == 'A')
    })

}

const subOrderInfo = ref<any>({
    contractNo: '',
    contractStatus: '',
})
const getOrderSubInfo = () => {
    getRentOrderInfo({
        orderNo: orderNo
    }).then(res => {
        console.log(res);
        subOrderInfo.value = res.data
    })
}

const toFangyuan = () => {
    uni.navigateTo({
        url: '/pages/order/fangyuan?orderNo=' + orderDetail.value.orderNo
    })
}

const showDaiKouList = () => {
    uni.navigateTo({
        url: '/pages/order/daikouList?orderNo=' + orderDetail.value.orderNo
    })
}

const toContract = () =>{
    uni.showLoading({ title: '正在打开...'})
    setTimeout(() => {
        interact.toast('网络繁忙，请稍后再试')
    }, 5000)
    // getContractDownUrl({
    //     orderNo: orderNo
    // }, { loadingIcon: false }).then(res => {
    //     console.log(res);
    //     uni.downloadFile({
    //         url: res.data.downloadUrl,
    //         fileType: 'pdf',
    //         success: (res) => {
    //             var filePath = res.tempFilePath;
    //             uni.openDocument({
    //                 filePath: filePath,
    //                 showMenu: true,
    //                 success: function (res) {
    //                     console.log('打开文档成功');
    //                 },
    //                 fail: (err) => {
    //                     uni.hideLoading()
    //                     interact.toast(err)
    //                 }
    //             });
    //         },
    //         fail: (err) => {
    //             uni.hideLoading()
    //             interact.toast(err)
    //         }
    //     })
    //     // uni.navigateTo({
    //     //     url: `/pages/webview/webview?path=${encodeURIComponent(encodeURIComponent(res.data.downloadUrl))}`
    //     // })
    // }, err => {
    //     uni.hideLoading()
    //     interact.toast(err)
    // })

}

// 取消订单
const cancelOrder = () => {
    uni.showModal({
        title: '提示',
        content: '确认取消该订单吗？',
        success: (res) => {
            if (res.confirm) {
                // TODO: 实现取消订单逻辑
            }
        }
    })
}

// 支付订单
const payOrder = () => {
    uni.navigateTo({
        url: `/pages/order/pay?orderNo=${orderDetail.value.orderNo}`
    })
}


</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f8f8f8;
    padding-bottom: 120rpx;
}

.status-bar {
    background: #fff;
    padding: 40rpx;
    display: flex;
    align-items: center;

    .status-info {
        margin-left: 30rpx;

        .status-text {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
        }

        .status-desc {
            font-size: 26rpx;
            color: #999;
            margin-top: 10rpx;
        }
    }
}

.address-card {
    margin-top: 20rpx;
    background: #fff;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .address-info {
        flex: 1;
        margin-right: 20rpx;

        .contact {
            margin-bottom: 10rpx;

            .name {
                font-size: 30rpx;
                font-weight: bold;
                margin-right: 20rpx;
            }

            .phone {
                color: #666;
            }
        }

        .address {
            font-size: 28rpx;
            color: #333;
        }
    }
}

.order-card {
    margin-top: 20rpx;
    background: #fff;
    padding: 30rpx;

    .store-info {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .store-name {
            margin-left: 10rpx;
            font-size: 28rpx;
        }
    }

    .product-info {
        display: flex;

        .product-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 8rpx;
        }

        .product-detail {
            flex: 1;
            margin-left: 20rpx;

            .product-name {
                font-size: 28rpx;
                color: #333;
            }

            .product-specs {
                font-size: 24rpx;
                color: #999;
                margin: 10rpx 0;
            }

            .price-info {
                display: flex;
                justify-content: space-between;

                .price {
                    color: $baseColor;
                    font-size: 30rpx;
                    font-weight: bold;
                }

                .count {
                    color: #999;
                    font-size: 26rpx;
                }
            }
        }
    }
}

.info-card, .price-card {
    margin-top: 20rpx;
    background: #fff;
    padding: 30rpx;

    .info-title {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    .info-item, .price-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15rpx;
        padding: 10rpx 0;
        font-size: 28rpx;

        .label {
            color: #666;
        }

        .value {
            color: #333;
        }
        .link{
            color: blue;
            text-decoration: underline;
        }

        &.total {
            margin-top: 20rpx;
            padding-top: 20rpx;
            border-top: 1rpx solid #eee;

            .label, .value {
                font-weight: bold;
                color: #333;
            }

            .value {
                color: $baseColor;
            }
        }
    }
}

.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 20rpx 0 20rpx;
    background: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;

    .btn {
        margin-left: 20rpx;
        width: 200rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 40rpx;
        font-size: 28rpx;

        &.btn-default {
            color: #666;
            background: #f5f5f5;
        }

        &.btn-primary {
            color: #fff;
            background: $baseColor;
        }
    }

    .safe_bar {
        width: 100%;
        height: env(safe-area-inset-bottom);
        padding-bottom: 20rpx;
        box-sizing: border-box;
    }
}
</style>
